<template>
	<div class="wt-patient-id-input">
		<wt-autocomplete
			ref="input"
			:disabled="disabled"
			v-model="currentValue"
			:allow-add="false"
			:query="query"
			:trigger-on-focus="false"
			@input="handleInput"
			@select="handleSelect"
			:auto-select="true"
			:custom-option-component="customItemComponent"
		></wt-autocomplete>
		<span v-if="showMessage">{{message}}</span>
	</div>
</template>
<script>
	/**
	 * 
	 * Events:
	 *	select 当确定患者信息时触发
	 */
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import AutoComplete from 'winged/components/wt-autocomplete'

	Vue.use(ElementUI);
	Vue.component(AutoComplete.name, AutoComplete);

	export default {
		name: 'wt-patient-id-input',
		props: {
			value: String,
			disabled: {
				type: Boolean,
				default: false
			},
			showMessage: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentValue: this.value,
				customItemComponent: 'wt-patient-item',
				query: {
					url: 'doctor/patient/existed/',
					value: 'patientId'
				},
				// 当前提示信息，理想状态应该由本组件来展示查询信息，而不是patient-form组件
				message: ''
			}
		},
		watch: {
			'value'(val, oldValue) {
				this.setCurrentValue(val);
			}
		},
		methods: {
			itemInfoDisplay(item) {
				return item.patientName;
			},
			setCurrentValue(value) {
				if (value === this.currentValue) return;
				this.currentValue = value;
			},
			handleInput(val) {
				this.$emit('input', val);
				// 刷新查询状态的功能目前还未调通，因为span的message会出现换行现象还未解决。
				/*
				let _this = this;
				Vue.nextTick(() => {
					_this.checkLoadingStatus();
				});*/
			},
			handleSelect(data) {
				this.$emit('select', data);
			},
			// 检查患者信息的查询状态并且显示对应信息。
			checkLoadingStatus() {
				// 刷新查询状态的功能目前还未调通，因为span的message会出现换行现象还未解决。
				/* 
				if (this.$refs.input.isLoading) {
					this.message = `正在查询病案号'${this.currentValue}'的患者信息`;
				}
				else {

				}*/
			}
		},
		created() {
			Vue.component(this.customItemComponent, {
				functional: true,
					render: function (h, ctx) {
						var item = ctx.props.item;
						var data = item.data;
						let value = item.value + ' - ' + data.patientName;

						let display = [
							h('div', { attrs: { class: 'name' } }, [value]),
						];
						return h('li', ctx.data, display);
					},
					props: {
						item: { type: Object, required: true }
					}
			});
		}
	}
</script>